<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-1.11.3.js"></script>
    <style type="text/css">
        .other {
        background-color: orange;
        font-size: 20px;
    }
    .myBtn {
        background-color: red;
    }
    </style>

    <script>
        $(function (){
            $('#getAttr').click(function (){
                console.log($('#btn').after('type'));
            })

            $('#setAttr').click(function () {
                $('#btn').attr('my', 'hh');
            })

            $('#addClass').click(function (){
                $('#btn').addClass('.other');
            })

            $('#removeClass').click(function (){
                $('#btn').removeClass('.other');
            })

            $('#toggleClass').click(function (){
                $('#btn').toggleClass('.other');
            })

            $('#hasClass').click(function (){
                console.log($('#btn').hasClass('other'));
            })

            //css方法针对style属性
            console.log($('#gender').css('color'));
            //val 方法针对value属性
            console.log($('#gender').val());
            //addClass 方法 removeClass方法 针对 class属性
            $('#gender').removeClass('.other');
            //prop 方法针对 checked 属性 selected 属性
            console.log($('#gender').prop('checkes'));
            //data 方法 针对 data-开头的属性的获取 若值是JSON格式 自动转成JS对象
            console.log($('#gender').data('option'));
        })
    </script>

</head>
<body>
<input id="btn" type="button" value="点我"/>
<form>
    <fieldset>
        <legend>属性操作</legend>
        <input type="button" value="获取属性值" id="getAttr"/>
        <input type="button" value="设置属性值" id="setAttr"/>
    </fieldset>
</form>
<form>
    <fieldset>
        <legend>CSS 操作</legend>
        <input type="button" value="添加CSS" id="addClass"/>
        <input type="button" value="删除CSS" id="removeClass"/>
        <input type="button" value="轮换CSS" id="toggleClass"/>
        <input type="button" value="判断CSS" id="hasClass"/>
    </fieldset>
</form>
<input type="checkbox" value="1" checked name="gender"
       id="gender" data-option='{"name" : "蒋干"}'
       style="color: red; background: aqua" class="myBtn other"> 男
</body>
</html>